<template>
  <div class="demo">

    <h2>基础地图</h2>
    <p>基本使用只需要使用echartmap标签即可</p>
    <div class="component-wrapper">
      <div class="component-wrapper-demo">
        <ClientOnly>
          <EchartMap />
        </ClientOnly>
      </div>
      <div class="code-content" style="height: 0">
        <div class="code-content-height">
          <pre><code class="vue">{{ codeStr }}</code></pre>
        </div>
      </div>
      <div class="lock-code" @click="showCode(0)" ref="EchartMapBase">
        <i :class="isShow[0] === false ? 'el-icon-arrow-down icon-down' : 'el-icon-arrow-up icon-down'"></i>
        <span class="lock-code-word">{{
          isShow[0] === false ? "显示代码" : "隐藏代码"
        }}</span>
      </div>
    </div>

    <h2>自定义点、线、块数据</h2>
    <p>进行自定义设置点线面需要传入mapPoint、mapLine、mapBlock数据，分别与点线块对应，具体参数说明见 Options</p>
    <div class="component-wrapper">
      <div class="component-wrapper-demo">
        <ClientOnly>
          <EchartMap :map-point="mapPoint" :map-line="mapLine" :map-block="mapBlock" />
        </ClientOnly>
      </div>
      <div class="code-content" style="height: 0">
        <div class="code-content-height">
          <pre><code class="vue">{{ codeStr1 }}</code></pre>
        </div>
      </div>
      <div class="lock-code" @click="showCode(1)" ref="EchartMapBase">
        <i :class="isShow[1] === false ? 'el-icon-arrow-down icon-down' : 'el-icon-arrow-up icon-down'"></i>
        <span class="lock-code-word">{{
          isShow[1] === false ? "显示代码" : "隐藏代码"
        }}</span>
      </div>
    </div>

    <h2>其余地图配置</h2>
    <p>进行自定义设置点线面需要传入mapPoint、mapLine、mapBlock数据，分别与点线块对应，具体参数说明见 Options</p>
    <div class="component-wrapper">
      <div class="component-wrapper-demo">
        <ClientOnly>
          <EchartMap :map-point="mapPoint" :map-line="mapLine" :map-block="mapBlock" :map-params="mapParams" />
        </ClientOnly>
      </div>
      <div class="code-content" style="height: 0">
        <div class="code-content-height">
          <pre><code class="vue">{{ codeStr2 }}</code></pre>
        </div>
      </div>
      <div class="lock-code" @click="showCode(2)" ref="EchartMapBase">
        <i :class="isShow[2] === false ? 'el-icon-arrow-down icon-down' : 'el-icon-arrow-up icon-down'"></i>
        <span class="lock-code-word">{{
          isShow[2] === false ? "显示代码" : "隐藏代码"
        }}</span>
      </div>
    </div>

    <h2>其他地图</h2>
    <p>只需要设置mapJson指定到对应的JSON文件即可，注意点：需等待文件完全引入后加载组件，避免传参的mapJson是一个空对象</p>
    <div class="component-wrapper">
      <div class="component-wrapper-demo">
        <ClientOnly>
          <EchartMap v-if="showMap" :map-json="chinaCity"/>
        </ClientOnly>
      </div>
      <div class="code-content" style="height: 0">
        <div class="code-content-height">
          <pre><code class="vue">{{ codeStr3 }}</code></pre>
        </div>
      </div>
      <div class="lock-code" @click="showCode(3)" ref="EchartMapBase">
        <i :class="isShow[3] === false ? 'el-icon-arrow-down icon-down' : 'el-icon-arrow-up icon-down'"></i>
        <span class="lock-code-word">{{
          isShow[3] === false ? "显示代码" : "隐藏代码"
        }}</span>
      </div>
    </div>

    <h2>Options</h2>
    <table style="width:100%">
      <tr>
        <th style="width: 10%;">参数</th>
        <th style="width: 20%;">参数说明</th>
        <th style="width: 10%;">类型</th>
        <th style="width: 50%;">可选值（取值说明）</th>
        <th style="width: 10%;">默认值</th>
      </tr>
      <tr>
        <td>mapPoint</td>
        <td>地图上展示的点数据</td>
        <td>Array</td>
        <td>数组对象：n为名称，value为经纬度坐标</td>
        <td>空数组</td>
      </tr>
      <tr>
        <td>mapLine</td>
        <td>地图上展示的线数据</td>
        <td>Array</td>
        <td>数组对象：fromName为起始点名称，toName为终点名称，coords为经纬度坐标</td>
        <td>空数组</td>
      </tr>
      <tr>
        <td>mapBlock</td>
        <td>地图上展示的块数据</td>
        <td>Array</td>
        <td>数组对象：name为省份名称，itemStyle.areaColor省份填充颜色</td>
        <td>空数组</td>
      </tr>
      <tr>
        <td>mapParams</td>
        <td>地图个性化配置</td>
        <td>Object</td>
        <td>见下 mapParams Options</td>
        <td>空对象</td>
      </tr>
      <tr>
        <td>mapJson</td>
        <td>地图JSON文件</td>
        <td>Object</td>
        <td>JSON文件</td>
        <td>中国地图</td>
      </tr>
    </table>

    <h2>mapParams Options</h2>
    <table style="width:100%">
      <tr>
        <th style="width: 10%;">参数</th>
        <th style="width: 20%;">参数说明</th>
        <th style="width: 10%;">类型</th>
        <th style="width: 50%;">可选值（取值说明）</th>
        <th style="width: 10%;">默认值</th>
      </tr>
      <tr>
        <td>is3d</td>
        <td>是否为3d地图</td>
        <td>Boolean</td>
        <td>true、false</td>
        <td>空字符串</td>
      </tr>
      <tr>
        <td>mapColor</td>
        <td>地图背景色</td>
        <td>Color</td>
        <td>颜色值、&#39;#fff&#39;、&#39;white&#39;、&#39;rgb(255,255,255)&#39;</td>
        <td>空字符串</td>
      </tr>
      <tr>
        <td>layoutSize</td>
        <td>地图放大缩小比例</td>
        <td>String</td>
        <td>&#39;100%&#39;、&#39;200%&#39;等</td>
        <td>&#39;100%&#39;</td>
      </tr>
    </table>
  </div>
</template>
  
<script>
import mixin from "../mixin";
import chinaCity from '../public/mapJson/china-cities.json'
export default {
  name: "EchartMapBase",
  mixins: [mixin],
  data() {
    return {
      codeStr: `<EchartMap />`,
      codeStr1: `<EchartMap :map-point="mapPoint" :map-line="mapLine" :map-block="mapBlock" />

        mapPoint: [{
          n: "西藏",
          value: [114.5332, 27.3779],
        }],
        mapLine: [{
          fromName: "长沙",
          toName: "南宁",
          coords: [
            [114.5332, 27.3779],
            [114.2813, 23.6426],
          ],
        }],
        mapBlock: [{
          name: "湖北",
          itemStyle: {
            areaColor: "#cc9e54",
          },
        },{
          name: "云南",
          itemStyle: {
            areaColor: "#cd4b6b",
          },
        },{
          name: "福建",
          itemStyle: {
            areaColor: "#d0d148",
          },
        },{
          name: "内蒙古",
          itemStyle: {
            areaColor: "blue",
          },
        }],
          `,
      codeStr2: `<EchartMap :map-point="mapPoint" :map-line="mapLine" :map-block="mapBlock" :map-params="mapParams"/>
mapParams: {
    // 是否为3d效果地图   取值为 true / false
    is3d: true,
    // 地图背景色    取值为颜色值  默认 #397e82
    mapColor: "red",
    // 地图展示大小  取值为大小 默认 100%
    layoutSize: "120%",
},
          `,
      mapPoint: [
        {
          n: "西藏",
          value: [114.5332, 27.3779],
        },
      ],
      mapLine: [
        {
          fromName: "长沙",
          toName: "南宁",
          coords: [
            [114.5332, 27.3779],
            [114.2813, 23.6426],
          ],
        },
      ],
      mapBlock: [
        {
          name: "湖北",
          itemStyle: {
            areaColor: "#cc9e54",
          },
        },
        {
          name: "云南",
          itemStyle: {
            areaColor: "#cd4b6b",
          },
        },
        {
          name: "福建",
          itemStyle: {
            areaColor: "#d0d148",
          },
        },
        {
          name: "内蒙古",
          itemStyle: {
            areaColor: "blue",
          },
        },
      ],
      // 地图配置
      mapParams: {
        // 是否为3d效果地图   取值为 true / false
        is3d: true,
        // 地图背景色    取值为颜色值  默认 #397e82
        mapColor: "red",
        // 地图展示大小  取值为大小 默认 100%
        layoutSize: "120%",
      },
      showMap: false,
    };
  },
  methods: {},
  mounted() {
    this.$nextTick(()=>{
      this.showMap = true
    })
  }
};
</script>